<template>
    <div class="list_container container">
        <div class="content" v-for="item in list" :key="item.id">
            <div class="title wow animate__animated animate__fadeInUp" data-wow-duration="1.6s" data-wow-delay="0.1s">{{
                item.title }}</div>
            <div class="nav">
                <div class="web_item wow animate__animated animate__fadeInUp" data-wow-duration="1.6s" data-wow-delay="0.1s"
                    v-for="i in item.navList" :key="i.id" @click="goWeb(i.webUrl)">
                    <img :src="i.imgUrl" :alt="i.webName">
                    <h3>{{ i.webName }}</h3>
                    <p>{{ i.desc }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang=ts>
import { ref, onMounted, nextTick } from 'vue';
// @ts-ignore
import WOW from 'wow.js'// 在vue3中下载的是wow.js|vue2中是wowjs

onMounted(() => {
    //初始化wow.js(页面滚动加载动画)
    nextTick(() => {   //页面渲染完，在执行
        new WOW().init()
    })
});

let list = ref([
    {
        id: 1,
        title: '设计相关网站',
        navList: [
            {
                id: 1,
                imgUrl: '/image/huaban.png',
                webName: '花瓣网',
                desc: '花瓣网是中国最大的花瓣社交网站，也是中国最大的花瓣图库',
                webUrl: 'https://huaban.com/'
            },
            {
                id: 2,
                imgUrl: '/image/kehua.png',
                webName: '可画网',
                desc: '各种设计相关模板网站',
                webUrl: 'https://www.canva.cn/'
            },
            {
                id: 3,
                imgUrl: '/image/chuangketie.png',
                webName: '创客贴',
                desc: '模板设计网站，可快速生成专业设计作品',
                webUrl: 'https://www.chuangkit.com/'
            },
            {
                id: 4,
                imgUrl: '/image/qiantu.png',
                webName: '千图网',
                desc: '提供了海量的设计素材的网站',
                webUrl: 'https://www.58pic.com/'
            },
            {
                id: 5,
                imgUrl: '/image/nitu.png',
                webName: '昵图网',
                desc: '是中国知名的设计素材交易平台，它提供各类图片素材、设计模板、创意作品下载服务',
                webUrl: 'http://www.nipic.com/'
            },
            {
                id: 6,
                imgUrl: '/image/baotu.png',
                webName: '包图网',
                desc: '提供各类设计素材的网站',
                webUrl: 'https://ibaotu.com/'
            },
            {
                id: 7,
                imgUrl: '/image/huke.png',
                webName: '虎课网',
                desc: '提供设计、绘画、办公软件、编程、营销等多种领域的在线课程与学习资源',
                webUrl: 'https://huke88.com/'
            },
            {
                id: 8,
                imgUrl: '/image/UI.png',
                webName: 'UI中国',
                desc: '中国领先的设计平台，专注于用户体验设计（UX/UI）、交互设计、视觉设计等相关领域',
                webUrl: 'https://www.ui.cn/'
            },
            {
                id: 9,
                imgUrl: '/image/4aqq.png',
                webName: '字体设计网站',
                desc: '具有大量的可商用字体',
                webUrl: 'https://www.4aqq.com/'
            },
            {
                id: 10,
                imgUrl: '/image/100font.png',
                webName: '100 font',
                desc: '具有大量的可商用字体',
                webUrl: 'https://www.100font.com/'
            },
            {
                id: 11,
                imgUrl: '/image/uugai.png',
                webName: 'LOGO设计网站',
                desc: '具有大量的logo模板,可根据需要直接生成logo',
                webUrl: 'https://uugai.com/'
            },
            {
                id: 12,
                imgUrl: '/image/undraw.png',
                webName: 'UI插画素材网站',
                desc: '有大量矢量的UI插画素材',
                webUrl: 'https://undraw.co/illustrations'
            },
            {
                id: 13,
                imgUrl: '/image/Pexels.png',
                webName: 'Pexels',
                desc: '免费的图片素材网站',
                webUrl: 'https://www.pexels.com/zh-cn/'
            },
            {
                id: 14,
                imgUrl: '/image/foodiesfeed.png',
                webName: 'Foodiesfeed',
                desc: '免费的食物图片素材网站',
                webUrl: 'https://www.foodiesfeed.com/'
            },
            {
                id: 15,
                imgUrl: '/image/zijie.png',
                webName: '字节跳动的图标库',
                desc: '具有部分常用图标，并且可以编辑其粗细大小等',
                webUrl: 'https://iconpark.oceanengine.com/'
            },
            {
                id: 16,
                imgUrl: '/image/iconfont.png',
                webName: 'Iconfont',
                desc: '阿里矢量图标库，具有大量实用的图标，设计必备',
                webUrl: 'https://www.iconfont.cn/'
            },
            {
                id: 17,
                imgUrl: '/image/remove.png',
                webName: '在线抠图网站',
                desc: '一键抠图',
                webUrl: 'https://www.remove.bg/zh'
            },
            {
                id: 18,
                imgUrl: '/image/uigradients.png',
                webName: '渐变色参考网站',
                desc: '有大量好看的渐变色，设计时可以参考',
                webUrl: 'https://uigradients.com/'
            },
            {
                id: 19,
                imgUrl: '/image/ilovepdf.png',
                webName: 'I love PDF',
                desc: '可以免费进行pdf的压缩、格式转换等操作',
                webUrl: 'https://www.ilovepdf.com/zh-cn'
            },
            {
                id: 20,
                imgUrl: '/image/bangxiaomang.png',
                webName: '帮小忙',
                desc: '收集了各种实用小工具，总能找到合适你的',
                webUrl: 'https://tool.browser.qq.com/'
            }
        ]
    },
    {
        id: 2,
        title: '视频剪辑相关网站',
        navList: [
            {
                id: 1,
                imgUrl: '/image/aigei.png',
                webName: '爱给网',
                desc: '内含大量的音效、视频、配乐等素材',
                webUrl: 'https://www.aigei.com/'
            },
            {
                id: 2,
                imgUrl: '/image/yinxiao.png',
                webName: '音效素材网站',
                desc: '纯音效素材网站',
                webUrl: 'https://taira-komori.jpn.org/freesoundcn.html'
            },
            {
                id: 3,
                imgUrl: '/image/mp3.png',
                webName: 'MyFreeMP3',
                desc: '免费音乐素材网站',
                webUrl: 'http://tool.liumingye.cn/music/?page=searchPage'
            },
            {
                id: 4,
                imgUrl: '/image/video.png',
                webName: 'FootageCrate',
                desc: '视频素材网站',
                webUrl: 'https://footagecrate.com/'
            }
        ]
    },
    {
        id: 3,
        title: '开发相关网站',
        navList: [
            {
                id: 1,
                imgUrl: '/image/tongyi.png',
                webName: '通义千问',
                desc: '阿里的AI大数据模型，其中有ai对话、ai绘画等',
                webUrl: 'https://tongyi.aliyun.com/'
            },
            {
                id: 2,
                imgUrl: '/image/wenyan.png',
                webName: '文言一心',
                desc: '百度的AI大数据模型',
                webUrl: 'https://yiyan.baidu.com/'
            },
            {
                id: 3,
                imgUrl: '/image/bit.png',
                webName: '比特虫',
                desc: '用于制作网页头部ico图标的网站',
                webUrl: 'http://www.bitbug.net/'
            },
            {
                id: 4,
                imgUrl: '/image/wow.png',
                webName: 'wow.js',
                desc: '页面滚动动画参考网站',
                webUrl: 'https://wowjs.uk/'
            },
            {
                id: 5,
                imgUrl: '/image/brumm.png',
                webName: 'Brumm',
                desc: 'css阴影样式参考网站，可一键复用代码，快捷高效完成开发',
                webUrl: 'https://shadows.brumm.af/'
            },
            {
                id: 6,
                imgUrl: '/image/uiverse.png',
                webName: 'Uiverse',
                desc: '各种动态css样式包括按钮、加载动画、表格、卡片等',
                webUrl: 'https://uiverse.io/all'
            },
            {
                id: 7,
                imgUrl: '/image/gaode.png',
                webName: '高德地图引用',
                desc: '可供开发者在项目中引用高德地图上的地点',
                webUrl: 'https://lbs.amap.com/console/show/card'
            },
            {
                id: 8,
                imgUrl: '/image/swiper.png',
                webName: 'Swiper',
                desc: 'Swiper 是一个非常流行的移动触摸滑动库，用于创建滑动视图、轮播图、触摸滑动等交互效果',
                webUrl: 'https://www.swiper.com.cn/'
            },
            {
                id: 9,
                imgUrl: '/image/animate.png',
                webName: 'Animate',
                desc: 'Animate是一个流行的 CSS 动画库，提供了许多预定义的动画效果，可以轻松地为网页元素添加各种动画效果。',
                webUrl: 'https://animate.style/'
            },
            {
                id: 10,
                imgUrl: '/image/yinji.png',
                webName: '印记中文',
                desc: '收录了大量的前端库',
                webUrl: 'https://docschina.org/'
            },
            {
                id: 11,
                imgUrl: '/image/boot.png',
                webName: 'BootCDN',
                desc: '收录很多前端常用工具库的源码',
                webUrl: 'https://www.bootcdn.cn/'
            },
            {
                id: 12,
                imgUrl: '/image/google.png',
                webName: '谷歌镜像商店',
                desc: '可在国内无需梯子即可安装谷歌的插件',
                webUrl: 'https://www.gugeapps.net/'
            },
            {
                id: 13,
                imgUrl: '/image/lodash.png',
                webName: 'Lodash',
                desc: '含有大量封装好的函数方法库如节流、防抖、去重...',
                webUrl: 'https://www.lodashjs.com/'
            },
            {
                id: 14,
                imgUrl: '/image/zhanzhang.png',
                webName: '站长素材',
                desc: '含有各种素材包括设计、前端网站等',
                webUrl: 'https://sc.chinaz.com/'
            },
            {
                id: 15,
                imgUrl: '/image/ali.png',
                webName: '数据大屏参考网站',
                desc: '具有大量数据大屏可视化案例共参考',
                webUrl: 'https://www.aliyun.com/activity/intelligent/datav-showcase'
            },
            {
                id: 16,
                imgUrl: '/image/echarts.png',
                webName: 'Echarts',
                desc: '一个基于 JavaScript 的开源可视化图表库',
                webUrl: 'https://echarts.apache.org/zh/index.html'
            },
            {
                id: 17,
                imgUrl: '/image/ISQQW.png',
                webName: 'ISQQW',
                desc: '基于Echarts的国内镜像库，并含有很多预设供开发者使用',
                webUrl: 'https://www.isqqw.com/'
            },
            {
                id: 18,
                imgUrl: '/image/api.png',
                webName: '开放API',
                desc: '公共的开放的api可供测试和学习',
                webUrl: 'https://api.8uid.cn/'
            },
            {
                id: 19,
                imgUrl: '/image/vant.png',
                webName: 'Vant UI',
                desc: '常用移动端的UI组件库',
                webUrl: 'https://youzan.github.io/vant/#/zh-CN/'
            },
            {
                id: 20,
                imgUrl: '/image/element.png',
                webName: 'Element Plus',
                desc: '常用PC端的UI组件库',
                webUrl: 'https://element-plus.gitee.io/zh-CN/'
            },
            {
                id: 21,
                imgUrl: '/image/panjiachen.png',
                webName: '后台模板源码',
                desc: 'panjiachen的维护的后台模板，可以基于该模板做二次开发',
                webUrl: 'https://github.com/PanJiaChen/vue-element-admin/'
            },
            {
                id: 22,
                imgUrl: '/image/gitee.png',
                webName: 'Gitee',
                desc: '国内的代码托管服务网站',
                webUrl: 'https://gitee.com/'
            },
            {
                id: 23,
                imgUrl: '/image/github.png',
                webName: 'Github',
                desc: '最大的代码交流网站',
                webUrl: 'https://github.com/'
            },
            {
                id: 24,
                imgUrl: '/image/kelongwo.png',
                webName: '克隆窝',
                desc: '各种破解软件下载的网站',
                webUrl: 'https://www.uy5.net/'
            },
        ]
    }
])

// 跳转到网页
const goWeb = (url: any) => {
    window.open(url, '_blank');
}
</script>

<style lang="scss" scoped>
.list_container {
    padding: 16px 0px 60px;

    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        margin-top: 60px;

        .title {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        .nav {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 40px;

            .web_item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 23.6%;
                height: 300px;
                background-color: #fff;
                border-radius: 16px;
                cursor: pointer;
                transition: all .2s linear;
                margin-bottom: 16px;


                &:hover {
                    box-shadow: 1px 10px 34px 1px rgb(0 0 0 / .08);
                    transform: translateY(-5px);
                }

                &:active {
                    transform: scale(0.98);
                }

                img {
                    width: 50px;
                    height: 50px;
                }

                h3 {
                    font-size: 20px;
                    font-weight: 550;
                    margin-top: 20px;
                    color: #333;
                    letter-spacing: 1px;
                }

                p {
                    width: 80%;
                    font-size: 15px;
                    color: #888;
                    text-align: center;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    /* 行数 */
                    -webkit-box-orient: vertical;
                    margin-top: 12px;
                }
            }
        }
    }
}
</style>